<template>
  <div class="indexDiv">
    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="1.5" :offset="6">
          <el-tag effect="plain">项目名称：</el-tag>
        </el-col>
        <el-col :span="6">
          <el-tag type="info" effect="dark">{{projectInfo.project_name}}</el-tag>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="1.5" :offset="6">
          <el-tag effect="dark">项目提交时间：</el-tag>
        </el-col>
        <el-col :span="6">
          <el-tag type="info" effect="dark">{{projectInfo.create_time}}</el-tag>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="1.5" :offset="6">
          <el-tag effect="dark">项目描述：</el-tag>
        </el-col>
        <el-col :span="8">
          <el-tag type="info" effect="dark">{{projectInfo.description}}</el-tag>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="1.5" :offset="6">
          <el-tag effect="dark">提交者：</el-tag>
        </el-col>
        <el-col :span="8">
          <el-tag type="info" effect="dark">{{projectInfo.owner}}</el-tag>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="1.5" :offset="6">
          <el-tag effect="dark">所属老师</el-tag>
        </el-col>
        <el-col :span="8">
          <el-tag type="info" effect="dark">{{projectInfo.userName}}</el-tag>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="1.5" :offset="6">
          <el-tag effect="dark">老师联系方式</el-tag>
        </el-col>
        <el-col :span="8">
          <el-tag type="info" effect="dark">{{projectInfo.phone}}</el-tag>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="1.5" :offset="6">
          <el-tag effect="dark">试验人联系方式</el-tag>
        </el-col>
        <el-col :span="8">
          <el-tag type="info" effect="dark">{{projectInfo.ownerphone}}</el-tag>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="1.5" :offset="6">
          <el-tag type="warning" effect="dark">预约时段：</el-tag>
        </el-col>
        <el-col :span="12">
          <el-tag type="info" effect="dark">{{projectInfo.start_time}}</el-tag>至
          <el-tag type="info" effect="dark">{{projectInfo.end_time}}</el-tag>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="1.5" :offset="6">
          <el-tag type="success" effect="dark">相关文件：</el-tag>
        </el-col>
        <el-col :span="2">
          <el-tag effect="plain">
            <el-link
              icon="el-icon-document"
              style="font-size:18px"
              :href="this.url.methodURL"
            >文件1：试验方案.pdf</el-link>
          </el-tag>
          <el-tag effect="plain">
            <el-link
              icon="el-icon-document"
              style="font-size:18px"
              :href="this.url.agreementURL"
            >文件2：安全卫生协议.pdf</el-link>
          </el-tag>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="1.5" :offset="6">
          <el-tag effect="dark">未通过审核原因：</el-tag>
        </el-col>
        <el-col :span="12">
          <el-tag type="info" effect="dark">{{projectInfo.reason}}</el-tag>
        </el-col>
      </el-row>
      <el-row></el-row>
      <el-row>
        <el-col :offset="6">
          <el-steps :space="200" :active="projectInfo.stage+1" finish-status="success" align-center>
            <el-step title="试验准备"></el-step>
            <el-step title="模型进场与否"></el-step>
            <el-step title="试验完成与否"></el-step>
            <el-step title="器材退场与否"></el-step>
          </el-steps>
        </el-col>
      </el-row>

      <el-row></el-row>
      <el-row></el-row>
      <el-row></el-row>
      <el-row :gutter="20">
        <el-col :span="1.5" :offset="6">
          <el-tag effect="dark">审核状态：</el-tag>
        </el-col>
        <el-col :span="1.5">
          <el-tag effect="plain">{{projectInfo.statusString}}</el-tag>
        </el-col>
        <el-col :span="2">
          <el-progress
            type="circle"
            :percentage="this.percentageFlag"
            :status="this.circleStatusFlag"
          ></el-progress>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      updateForm: {
        projectName: "",
        province: "",
        city: "",
        address: "",
        structuralType: "",
        // openStatus: false,
        //img表示完整的路径
        img: "",

        imgName: "",
        uid: "",
        projectId: ""
      },
      circleStatusFlag: "success",
      percentageFlag: 20,

      url: {
        methodURL: "",
        agreementURL: ""
      },
      editInfoForm: {},
      openStatusValue: ""
    };
  },
  computed: {
    ...mapState(["projectInfo", "userInfo"])
  },
  components: {},
  methods: {
    ...mapActions(["setInitCurrentProjectInfo"]),

    getProjectInfoByTokenAndId() {
      let id = this.$route.params.id;
      this.$http
        .get(`project/getProjectInfoByTokenAndId?info=` + id)
        .then(res => {
          this.setInitCurrentProjectInfo(res.data.data);
          this.updateForm.projectName = this.projectInfo.project_name;
          this.updateForm.uid = this.userInfo.id;
          this.updateForm.projectId = this.projectInfo.id;
          //如果不修改的话，下面这些东西都没有用，就保留了一些有用的
          // this.updateForm.province = this.projectInfo.province;
          //this.updateForm.city = this.projectInfo.city;
          // this.updateForm.address = this.projectInfo.address;
          var domain = "http://cdn.hustzjc.top/";
          this.url.methodURL = domain + this.projectInfo.methodURL;
          this.url.agreementURL = domain + this.projectInfo.agreementURL;
          //修改进度条的状态
          switch (this.projectInfo.status) {
            case 0:
              this.circleStatusFlag = "warning";
              this.percentageFlag = 20;
              break;
            case 1:
              this.circleStatusFlag = "success";
              this.percentageFlag = 100;
              break;
            case 2:
              this.circleStatusFlag = "exception";
              this.percentageFlag = 50;
              break;
            case 3:
              this.circleStatusFlag = "";
              this.percentageFlag = 75;
              break;
          }
        });
    }
  },

  created() {
    this.getProjectInfoByTokenAndId();
  }
};
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>